<template>
  <div class="bus-line-container" style="padding: 20px;">

    <!-- toast -->
    <toast :show.sync="toastShow" position="center" :delay="-1">数据加载中...</toast>

    <section class="bus-line-detail">
      <div class="bus-line-left">
        <h4 class="bus-line-start2end ell" v-text="busStartAndEndStation"></h4>
        <summary class="bus-line-summary" v-text="busLineDistance"></summary>
      </div>
      <div class="bus-line-right">
        <div class="reserve bd_none dib " @click="reserveBusLineClickHandler">
          <em class="icon-paixu" style="vertical-align: -2px; color: #00AFFF; font-size: 24px;"></em>
        </div>
      </div>
    </section>
    <section class="bus-line-path">
      <ul class="bus-line-path-list">
        <li class="bus-line-path-item" v-for="station in busLine.via_stops"
            @click="busStationClickHandler(station)"
        >
          <div class="bus-line-indicator">
            <div class="circle">
              <div class="circle-inner"></div>
            </div>
          </div>
          <span v-text="station.name"></span>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  import { toast } from '../../../view/components/toast'
  import { setStationInfo } from 'VUEX/actions/tripStation';

  export default {
    data() {
      return {
        toastShow: true,
        busLine: [],
        LineSearch: null,
        searchBusLineResult: [],
        busLineReserveControlPoint: 0,


        tripForm: {
          stationType: 'startStation',                        // 起点还是结束
          type: 'inwork',                                     // 设置上班还是下班的行程
          startStationName: '',                               // 起始站点
          startStationGeo: null,                              // 起始站点地理位置信息
          endStationName: '',                                 // 结束站点
          endStationGeo: null                                 // 结束站点地理位置信息
        },
      }
    },

    vuex: {
      actions: {
        setStationInfo
      }
    },

    computed: {
      // 公交线路起始终点信息
      busStartAndEndStation () {
        let {start_stop = '起点站', end_stop = '终点站'} = this.busLine;

        if (!this.busLine)
          return '暂无相关信息';
        else
          return `${start_stop} - ${end_stop}`;
      },

      // 公交线路总路程
      busLineDistance () {
        let { distance = '0.00'} = this.busLine;

        if (!this.busLine)
          return '全程 0.00 公里';
        else
          return `全程 ${Number.prototype.toFixed.call(Number(distance), 2)} 公里`;
      },
    },

    methods: {
      /**
       * @desc 获取公交线路详细信息
       * @param lineName {String} 公交线路名称
       * @param cityCode {Number} 城市代码，标识现处于哪座城市
       */
      getBusLineInfo (lineName, cityCode) {
        this.LineSearch = new window.AMap.LineSearch({
          city: cityCode, extensions: 'all'
        });

        this.LineSearch.search(lineName, (status, {lineInfo}) => {
          if (status === 'error') return;

          this.searchBusLineResult = lineInfo;
          this.busLine = lineInfo[this.busLineReserveControlPoint++ % 2];

          this.toastShow = false;
        });
      },

      /**
       * @desc 公交站点点击处理函数
       * @param name {String} 公交站点名
       * @param location {Object} 公交站点地理位置信息
       * @param poiId {String} 高德公交站点 ID
       */
      busStationClickHandler ({name, location, id: poiId}) {
        this.tripForm[`${this.tripForm.stationType}Name`] = name;
        this.tripForm[`${this.tripForm.stationType}Geo`] = { location: location.toString(), poiId };

        console.log(this.tripForm);
        this.setStationInfo(this.tripForm);
        this.$router.go({
          name: 'setting-trip',
          params: {tripType: this.tripForm.type}
        })
      },

      /**
       * @desc 颠倒公交线路
       */
      reserveBusLineClickHandler () {
        this.busLine = this.searchBusLineResult[this.busLineReserveControlPoint++ % 2];
      }
    },

    ready () {
      // 获取路由参数
      let lineName = this.$route.params.lineName;
      let cityCode = this.$route.params.cityCode;
      if (lineName) {
        this.tripForm.tripType = this.$route.params.tripType;
        this.tripForm.stationType = this.$route.params.stationType;

        this.getBusLineInfo(lineName, cityCode);
      }
    },

    components: { toast }
  }
</script>

<style lang="scss">
  .right {
    float: right;
    border: 1px solid red;
  }
</style>
